<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    let vm = {
        template: `
                    <div>
                        <my-title :level=1>
                            hello
                        </my-title>    
                    </div>
                `,
        data () {
            return {
            }
        }
    }
    let app = Vue.createApp(vm)
    // my-title特点，一句传进来的level决定slot展示形式
    // 展示类组件（不需要具体操作）
    // 推荐使用render函数去做
    app.component('my-title', {
        props: ['level'],
        render () {
            const { h } = Vue
            // h函数的三个参数：标签 对象（标签的属性） 标签中的子节点
            // return h("h" + this.level, { 'class': 'box' }, 'Hello World')
            return h('h' + this.level, {}, [
                // this.$slot.default(),
                h("h2", {}, 'GalaxySa'),
                h("div", {}, [
                    h("h3", {}, 'GUgua')
                ])
            ])
        }
        // template: `
        //         <div>
        //             <h1 v-if="level==1">
        //                 <slot>    
        //             </h1>    
        //             <h2 v-if="level==2">
        //                 <slot>    
        //             </h2>   
        //         </div>
        // `
    })
    app.mount('#app')
</script>

</html>